import React, { useEffect, useState } from 'react';
import { useHistory } from "react-router-dom";
import {
    Modal, Toast, Picker, Button, List, TextareaItem,InputItem
} from 'antd-mobile';
import { dateFormat } from "../../../model/code";
import http from "../../../model/http";
import code from "../../../model/code"; 
import Header from "../../../components/header/Header";
import './operation.less' 
import SignatureCanvas from 'react-signature-canvas';

const Item = List.Item
function Add() {
    const history = useHistory();
    // 回访类型下拉
    const [visitTypeData,setVisitTypeData] = useState([])
    // 回访方式下拉
    const [visitMethod, setVisitMethod] = useState([])
    // 沟通状态下拉
    const [visitStatus, setVisitStatus] = useState([])

    // 回访类型值
    const [visitTypeVal,setVisitTypeVal] = useState([-1])
    // 回访方式
    const [visitMethodVal,setVisitMethodVal] = useState([-1])
    // 沟通状态
    const [visitStatusVal,setVisitStatusVal] = useState([-1])

    // 回访目的
    const [purpose,setPurpose] = useState('')
    // 回访内容
    const [content, setContent] = useState('')
    const [addTypeVal, setAddTypeVal] = useState([])



    // 姓名
    const [username,setUsername] = useState('')
    // 性别
    const [userSex,setUserSex] = useState('')
    // 病室
    const [userWard,setUserWard] = useState('')
    // 床号
    const [userBedNumber,setUserBedNumber] = useState('')
    // 诊断
    const [userDiagnosis,setUserDiagnosis] = useState('')
    //手术名称
    const [userOperation,setUserOperation] = useState('')
    //手术者
    const [operationUser,setOperationUser] = useState('')
    // 助手
    const [userAssistant,setUserAssistant] = useState('')
    // 施麻醉者
    const [userAnesthetist,setUserAnesthetist] = useState('')
    // 麻醉方法
    const [userAnesthetistMethod,setUserAnesthetistMethod] = useState('')
    // 所需材料
    const [userAnesthetistRequired,setUserAnesthetistRequired] = useState('')
    // 手术费
    const [userOperationCost,setUserOperationCost] = useState('')
    // 手术时间
    const [userDate,setUserDate] = useState('')
    const [userTime,setUserTime] = useState('')


    // canvas img
    const [imgUrl,setImgUrl] = useState('')

    /*渲染完成*/
    // useEffect(async () => { 
 
         
         
    // }, [])
     
    // 回访类型
    const getVisitTypeVal = (v) => {
        
    }
    // 回访方式
    const getVisitMethodVal = (v) => {
        
    }
    // 沟通状态
    const getVisitStatusVal = (v) => {
         
    }
    const addSave = async () => { 
        if(visitTypeVal[0] < 0){ Toast.fail('请选择回访类型'); return };
        if(visitMethodVal[0] < 0){ Toast.fail('请选择回访方式'); return };
        if(visitStatusVal[0] < 0){ Toast.fail('请选择沟通状态'); return };
        if(purpose == ''){ Toast.fail('请输入回访目的'); return }; 
        if(content == ''){ Toast.fail('请输入回访内容'); return }; 
        
        Modal.alert('提示', '确认提交回访记录', [
            { text: '取消' },
            {
              text: '提交', onPress: async () => {
                

                const addRes = await http.post('/feedback/addFeedback',{
                    customerCrmId: history.location.state.customerCrmId,
                    scout_type: addTypeVal.crm_type != undefined ? addTypeVal.crm_type : '',
                    scout_type_name: addTypeVal.name,
                    scout_purpose: purpose,
                    scout_content: content,
                    receive_state: visitStatusVal[0],
                    scout_mode: visitMethodVal[0]
                })
                console.log(addRes)
                if(addRes.code == 0){
                    Toast.success('保存成功')
                        setTimeout(() => {
                        history.push('/returnVisit')
                    }, 500); 
                }else{
                    Toast.fail(addRes.msg)
                }
              }
            }
        ])

        
    }

    let canvasFunc = {
        clear: () => {},
        toDataURL: (params) => {
            return '';
        }
    }
    const save = () => {
        const imgUrl = canvasFunc.toDataURL('image/png');
        setImgUrl(imgUrl)
    }
     
    return (
        <div>
            <div className="v-electron-operation">
                <div className='body-background-div'></div>
                <List className='g-p5-10 g-bg-f g-bdrs12 g-mb10'>
                    <Item wrap extra={111}>卡号</Item>
                    <InputItem type='text' value={username} 
                        onChange={v => { setUsername(v) }}
                        moneyKeyboardAlign='right' className="input-css">姓名
                    </InputItem>
                    <InputItem type='text' value={userSex} 
                        onChange={v => { setUserSex(v) }}
                        moneyKeyboardAlign='right' className="input-css">性别
                    </InputItem>
                    <InputItem type='text' value={userWard} 
                        onChange={v => { setUserWard(v) }}
                        moneyKeyboardAlign='right' className="input-css">病室
                    </InputItem>
                    <InputItem type='text' value={userBedNumber} 
                        onChange={v => { setUserBedNumber(v) }}
                        moneyKeyboardAlign='right' className="input-css">床号
                    </InputItem>
                    <InputItem type='text' value={userDiagnosis} 
                        onChange={v => { setUserDiagnosis(v) }}
                        moneyKeyboardAlign='right' className="input-css">诊断
                    </InputItem>

                    <InputItem type='text' value={userOperation} 
                        onChange={v => { setUserOperation(v) }}
                        moneyKeyboardAlign='right' className="input-css">手术名称
                    </InputItem>

                    <InputItem type='text' value={operationUser} 
                        onChange={v => { setOperationUser(v) }}
                        moneyKeyboardAlign='right' className="input-css">手术者
                    </InputItem>
                     
                    <InputItem type='text' value={userAssistant} 
                        onChange={v => { setUserAssistant(v) }}
                        moneyKeyboardAlign='right' className="input-css">助手
                    </InputItem>
                    <InputItem type='text' value={userAnesthetist} 
                        onChange={v => { setUserAnesthetist(v) }}
                        moneyKeyboardAlign='right' className="input-css">施麻醉者
                    </InputItem>
                    <InputItem type='text' value={userAnesthetistMethod} 
                        onChange={v => { setUserAnesthetistMethod(v) }}
                        moneyKeyboardAlign='right' className="input-css">麻醉方法
                    </InputItem>
                    <InputItem type='text' value={userAnesthetistRequired} 
                        onChange={v => { setUserAnesthetistRequired(v) }}
                        moneyKeyboardAlign='right' className="input-css">所需材料
                    </InputItem>
                    <InputItem type='number' value={userOperationCost} 
                        onChange={v => { setUserOperationCost(v) }}
                        moneyKeyboardAlign='right' className="input-css">手术费
                    </InputItem>
 
                    
                    {/* <Picker data={visitTypeData} cols={1}
                    value={visitTypeVal} onOk={v => getVisitTypeVal(v)}
                    >
                        <Item arrow="horizontal">回访类型</Item>
                    </Picker>
                    <Picker data={visitMethod} cols={1}
                    value={visitMethodVal} onOk={v => getVisitMethodVal(v)}>
                        <Item arrow="horizontal">回访方式</Item>
                    </Picker>
                    <Picker data={visitStatus} cols={1}
                    value={visitStatusVal} onOk={v => getVisitStatusVal(v)}>
                        <Item arrow="horizontal">沟通状态</Item>
                    </Picker> */}
                    
                </List>
                <List className='g-p5-10 g-bg-f g-bdrs12' style={{marginTop:'10px'}}>
                    <TextareaItem value={purpose} rows={5} count={50} onChange={v => {setPurpose(v)}} className="input-css" placeholder='请输入回访目的...' />
                </List>
                <List className='g-p5-10 g-bg-f g-bdrs12' style={{marginTop:'10px',marginBottom:'20px'}}>
                    <TextareaItem value={content} rows={5} count={50} onChange={v => {setContent(v)}} className="input-css" placeholder='请输入回访内容...' />
                </List>

                <Button className="add-btn" type="primary" onClick={addSave}>提交</Button>


                <SignatureCanvas 
                    id="myCanvas"
                    penColor="#000"
                    canvasProps={{
                        width:500,
                        height:500,
                        
                    }}
                    ref={(ref) => {
                        canvasFunc = ref
                    }}
                />
                <div><img className='write-name-canvas' src={imgUrl} /></div>
                <div>
                    <Button onClick={() => save()}>保存</Button>
                </div>
            </div>
            <Header/>
        </div>
    )
}   
export default Add;